<template>
    <div class='dataList'>
        <!-- 分页显示疫情数据 -->
        <!-- 上报按钮 -->
        <el-button @click='toAddPage'>上报</el-button>
        <el-input style="width:250px " v-model="params.province" placeholder="请输入省份"></el-input>
        <!-- 表格 -->
        <el-table
            :data="tableData"
            style="width: 100%">
        <el-table-column
            prop="id"
            label="编号"
            width="80">
        </el-table-column>
        <el-table-column
            prop="country"
            label="国"
            width="80">
        </el-table-column>
        <el-table-column
            prop="province"
            label="省"
            width="100">
        </el-table-column>
        <el-table-column
            prop="city"
            label="市"
            width="100">
        </el-table-column>
        <el-table-column
            prop="area"
            label="区"
            width="100">
        </el-table-column>
        <el-table-column>
        </el-table-column>
       <el-table-column
            prop="confirmed"
            label="新增"
            width='80'>
        </el-table-column>
        <el-table-column
            prop="suspected"
            label="疑似"
            width="80">
            <template v-slot="scope">
                <el-tag type='success'>{{scope.row.suspected}}</el-tag>
            </template>
        </el-table-column>
        <el-table-column
            prop="dead"
            label="死亡"
            width="80">
            <template v-slot="scope">
                
               <el-tag type='info'>{{scope.row.dead}}</el-tag>
            </template>
        </el-table-column>
        <el-table-column
            prop="cure"
            label="治愈"
            width="80">
            <template v-slot="scope">
                
               <el-tag type='warning'>{{scope.row.cure}}</el-tag>
        </template>
        </el-table-column>
        <el-table-column
            prop="outside"
            label="境外输入"
            width="80">
            <template v-slot="scope">
                
               <el-tag >{{scope.row.outside}}</el-tag>
         </template>
        </el-table-column>
        <el-table-column
            prop="severe"
            label="重症"
            width="80">
            <template v-slot="scope">
                
               <el-tag type='danger'>{{scope.row.severe}}</el-tag>
         </template>
        </el-table-column>
        <el-table-column
            prop="inputTime"
            label="输入时间"
            width="200">
            <template v-slot="scope">
                {{scope.row.inputTime | dateFMT}}
            </template> 
        </el-table-column>
    </el-table>
    <!-- 分页 -->
        <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :page-size='params.pageSize'
            :current-page = 'params.page'
            @current-change = 'pageChange'>
        </el-pagination>
    </div>
</template>


<script>

import axios from '@/http/axios'
import moment from 'moment'

export default {
    data(){
        
        return {
            tableData:[],
            total:0,
            params:{
                page:1,
                pageSize:10
            }
            
        }
    },
    filters:{
        dateFMT(str){
            return moment(str).format('YYYY-MM-DD HH:mm:ss')
        }
    },

    created(){
        this.queryPage()
    },
    watch:{
        params:{
            handler:function(){
                this.queryPage()
            },
            deep:true
        }
    },

    methods:{

        
        pageChange(page){
            this.params.page = page
        },


        // 跳转至数据上报页面
        toAddPage(){
            this.$router.push({
                path:'/dataList/dataAdd'
            })
        },
        // 分页查询数据
        queryPage(){
            axios({
                url:'http://121.199.29.84:8001/epidemic/pageQuery',
                method:'get',
                params:this.params
            }).then((res)=>{
                // 分页的总条数
                this.total = res.data.data.total;
                // 表格数据
                this.tableData = res.data.data.list
            })
        }
    }
}
</script>